<template>

  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="ketang">班级通知</h3>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-more" @click="toAllClassNotice"></i>
        </el-col>
      </el-row>
    </div>
    <div class="container_body">
      <el-row :gutter="20">
        <el-col :span="7">

          <div v-if="classessList.length == 0" class="container_body1">
          </div>
          <div v-else class="container_body1" @click="toClassNotice(classessList[0])">
            <!--图片按钮-->
            <el-row class="card_container">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <img src="../../public/img/1.jpg" class="image">
                  <div style="padding: 14px;">
                    {{ classessList[0].className }}
                  </div>
                  <div class="num">
                    {{ classessList[0].totalStudent }}人
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="container_body6">
            <el-row :gutter="20">
              <el-col :span="16">
                <h3 class="beike">最新备课</h3>
              </el-col>
              <el-col :span="8">
                <a href="" @click="toClassesList" class="gengduo2"><i class="el-icon-more"></i></a>
              </el-col>
            </el-row>
          </div>
          <div class="container_body8" v-for="(classes,index) in classessList" :key="index" v-if="index <= 2">
            <el-row>
              <el-col :span="8">
                <div>
                  <img src="img/2.jpg" style="height: 115px;">
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <h3>{{ classes.className }}</h3>
                  <h4 style="color: #606266">学生：{{ classes.totalStudent }}人</h4>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="margin-top: 25px">
                  <el-button type="primary" icon="el-icon-edit" circle @click="toCourse(classes)">继续备课</el-button>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-col>

        <el-col :span="7">
          <div class="container_body2" @click="toClassNotice(classessList[1])">
            <!--图片按钮-->
            <el-row class="card_container" v-if="classessList.length > 1">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <img src="../../public/img/2.jpg" class="image">
                  <div style="padding: 14px;">
                    {{ classessList[1].className }}
                  </div>
                  <div class="num">
                    {{ classessList[1].totalStudent }}人
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

        </el-col>

        <el-col :span="10">
          <div class="container_body3" @click="toSetting()">

            <el-row :gutter="20">
              <el-col span="6">
                <div class="block" style="margin-right: 250px;margin-top: 16px">
                  <el-avatar shape="square" :size="100" :src="squareUrl"></el-avatar>
                </div>
              </el-col>
              <el-col span="18">
                <div><h1 style="color: black;margin-right: 160px;margin-top: 30px"> {{ user.userName }}</h1></div>
                <div><h3 style="color: #606266;margin-right: 80px">点击完善个人资料</h3></div>
              </el-col>
            </el-row>
          </div>
          <div class="container_body4">
            <h4>院校通知</h4>
          </div>
          <div class="container_body5" @click="toGlobalNotice">
            <div class="null_notice" v-if="globalNoticeList.length == 0">点击查看详情</div>
            <div v-else v-for="(notice,index) in globalNoticeList" :key="index" class="simple_notice_wrap">
              <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
              <div class="simple_notice_content">{{ notice.noticeContent.substring(0, 15) + '...' }}</div>
              <div class="simple_notice_time">{{ dateFormat(notice.updateTime) }}</div>
            </div>
          </div>
          <div class="container_body7">
            <h4 class="rili">日历</h4>
          </div>
          <div class="container_body10">
            <el-calendar v-model="value">
            </el-calendar>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "UpdateStudent",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      globalNoticeList: [],
      user: JSON.parse(window.localStorage.getItem('user')),
      value: new Date(),
      //班级数组
      classessList: [],
      //班级信息
      classes: '',
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large"]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //个人设置跳转
    toSetting() {
      var _this = this;
      if (this.user.role == 0) {
        _this.$router.push('/')
      } else if (this.user.role == 1) {
        _this.$router.push('/updateTeacher')
      } else if (this.user.role == 2) {
        _this.$router.push('/updateStudent')
      }
    },

    //下面是通知相关
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //跳转通知列表，通知类型为全局通知
    toGlobalNotice() {
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 0
        }
      });
    },
    //跳转所有班级通知
    toAllClassNotice() {
      this.$router.push({
        path: '/allClassNotice'
      });
    },
    //跳转特定班级通知
    toClassNotice(x) {
      console.log("111")
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 1,
          classIdid: x.classIdid
        }
      })
    },
    //跳转班级列表页面
    toClassesList() {
      this.$router.push({
        path: '/classesList',
      })
    },
    //跳转课程详情页面
    toCourse(classes) {
      console.log(classes)
      this.$router.push({
        path: '/courseDirectory',
        query: {
          classes: classes
        }
      })
    },
    //获取前四条全局通知
    getGlobalNotice() {
      const _this = this;
      axios.get('http://localhost:8080/notice/listGlobal/1/4').then(function (res) {
        _this.globalNoticeList = res.data.data.content
        console.log("_this.globalNoticeList");
        console.log(_this.globalNoticeList);
      })
    }
    ,
//获取老师前两个班级
    getPreTwoClass() {
      const _this = this;
      axios.get('http://localhost:8080/classStuDetail/findClassByTeacherId?teacherId=' + _this.user.userId).then(function (res) {
        _this.classessList = res.data.data
        console.log("_this.classessList");
        console.log(_this.classessList);
      })
    }
  },
  created() {
    var _this = this;
    //获取教师的所有班级
    axios.get("http://localhost:8080/classStuDetail/findClassByTeacherId?teacherId=" + _this.user.userId).then(function (res) {
      _this.classessList = res.data.data;
      console.log("教师所有班级");
      console.log(_this.classessList);
    })
    //获取前四条全局通知
    this.getGlobalNotice();
    this.getPreTwoClass();
  }

}
</script>

<style scoped>

/*通知begin*/
.null_notice {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  color: snow;
}

.simple_notice_title {
  color: #f34545;
  font-weight: bold;
  font-size: 15px;
}

.simple_notice_content {
  margin-top: 2px;
  color: #000;
  font-size: 12px;
}

.simple_notice_time {
  text-align: right;
  /*margin: 10px;*/
  /*margin-right: 6px;*/
  padding-right: 10px;
  font-size: 2px;
  color: #888;
}

.simple_notice_wrap {
  background-color: white;
  width: 90%;
  margin: 10px auto;
  height: 50px;
  padding-top: 5px;
  padding-left: 20px;
  border-radius: 10px;
  /*border: 1px solid black;*/
}

/*通知end*/
.container {
  height: 570px;
  margin-bottom: 30px;
}

.container_head {

}

.ketang {
  margin-left: 50px
}

.gengduo {
  margin-left: 60px
}

.beike {
  margin-left: 150px;
}

.gengduo2 {
  margin-left: 180px;
  margin-top: 0px;
}

.rili {
  margin-right: 640px;
}

.container_body {

}

.container_body1 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  margin: 0px;
  padding: 0px;
  height: 350px;
  width: 350px;
  margin-left: 190px;
  /*background-color: white;*/
  shadow: hover;
}

/*.container_body1:hover {*/
/*  box-shadow: 0 2px 30px rgb(69, 176, 255);*/
/*}*/


.container_body2 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  margin: 0px;
  padding: 0px;
  height: 350px;
  width: 350px;
  margin-left: 90px;
  /*background-color: white;*/
  shadow: hover;
}

.card_container:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body3 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 130px;
  width: 380px;
  margin-top: 1px;
  margin-right: 200px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
}

.container_body3:hover {
  box-shadow: 0 2px 30px rgb(69, 176, 255);
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .3)*/
}

.container_body4 {
  margin-right: 610px;
  margin-bottom: 20px;
}

.container_body5 {
  text-align: left;
  height: 260px;
  width: 380px;
  margin-right: 100px;
  /*margin-right:60px;*/
  /*background-color: white;*/
  box-shadow: 0 2px 10px rgb(0, 0, 0);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.container_body5:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body6 {

}

.container_body7 {

}

.container_body8, .container_body9 {
  height: 130px;
  width: 700px;
  margin-left: 190px;
  /*margin-right:60px;*/
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.container_body8:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}


.container_body9:hover {

  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body10 {
  height: 380px;
  width: 380px;
  margin-right: 100px;
  /*margin-right:60px;*/
  /*background-color: white;*/
  /*padding: 20px;*/
  margin-bottom: 20px;
}

.el-icon-more {
  font-size: 35px;
  color: #000000;
  margin-left: 390px;
  margin-top: 20px;
}

/*
日历样式
*/


</style>
<style>
.el-calendar-table .el-calendar-day {
  height: 36px !important;
  /*width: 40px!important;*/

  color: #C0C4CC;
}

.el-calendar {
  width: 410px !important;
  margin-right: 50px !important;
}
</style>

<!--图片按钮有关-->
<style>
.num {
  font-size: 13px;
  color: #999;
  text-align: right;
  margin: 10px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 126%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
